<template>
	<view>
		<u-navbar title="创作中心" titleStyle="color:#fff;" :placeholder="true" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0,0,0,0)">
			
		</u-navbar>
		
		<view class="my_info">
			<image v-if="userInfo.avatar" class="head" :src="userInfo.avatar" mode="aspectFill"></image>
			<image v-else class="head" src="../../static/img/ico_head.png" mode="aspectFill"></image>
			<view class="item">
				<view class="name">
					{{userInfo.first_name}}
				</view>
				<view class="text">
					推氪号:{{userInfo.t_id}}
				</view>
			</view>
		</view>
		
		
		<view class="create_nav">
			<navigator class="item" url="/imagePages/myImage/myImage" hover-class="none">
				<image class="ico" src="../static/img/ico_20.png" mode="widthFix"></image>
				<view class="info">
					<view class="name">
						我的形象
					</view>
					<view class="text">
						定制您的数字人形象
					</view>
				</view>
			</navigator>
			<navigator class="item" url="/soundPages/mySound/mySound" hover-class="none">
				<image class="ico" src="../static/img/ico_21.png" mode="widthFix"></image>
				<view class="info">
					<view class="name">
						我的声音
					</view>
					<view class="text">
						定制您的专属声纹
					</view>
				</view>
			</navigator>
		</view>
		
		<view class="create_scene">
			<view class="title">
				<view class="name">
					场景设置
				</view>
				<navigator class="btn" url="/scenePages/addScene/addScene" hover-class="none">
					创建新场景
				</navigator>
			</view>
			
			<view v-if="livesList.length == 0" class="list_none" >
				<image class="img" src="../static/img/ico_none.png" mode="widthFix"></image>
				<view class="text">暂未创建任何场景</view>
			</view>
			
			<view v-else class="scene_list">
				<view class="list_item" v-for="(item,index) in livesList" :key="index">
					<image class="ph" :src="item.file" mode="aspectFill"></image>
					<view class="item">
						<view class="item_title">
							<view class="name">
								{{item.name}}
							</view>
							<!-- <view class="tag">草稿</view> -->
						</view>
						<view class="text">
							{{item.sub_title}}
						</view>
						<view class="time">
							{{$u.timeFormat(item.update_time, 'yyyy-mm-dd hh:MM:ss')}}
						</view>
						<view class="btn">
							<view class="btn_fabu" v-if="item.is_private == 5" @click="clickShowPower(item)">
								发布上线
							</view>
							<!-- postMyAigcLivesList(item.id, item.name, 0) -->
							<view v-else class="btn_power" @click="clickShowPower(item)">
								<span v-if="item.is_private == 0">公开</span>
								<span v-if="item.is_private == 2">会员</span>
								<span v-if="item.is_private == 1">私密</span>
								<span v-if="item.is_private == 4">个人</span>
								<u-icon name="arrow-down" color="#111" size="28rpx"></u-icon>
							</view>
							<navigator v-if="item.is_private == 5" class="btn_item" :url="'/scenePages/sceneSet/sceneSet?id='+item.id+'&isPrivate='+item.is_private" hover-class="none">
								<image class="ico" src="../static/img/ico_22.png" mode="widthFix"></image>
							</navigator>
							<navigator v-else class="btn_item" :url="'/scenePages/sceneSet/sceneSet?id='+item.id+'&isPrivate='+item.is_private" hover-class="none">
								<image class="ico" src="../static/img/setting_btn.png" mode="widthFix"></image>
							</navigator>
							
							<view  v-if="item.is_private == 0" class="btn_item" @click="getWechatAcode(item.id,item.is_private)">
								<image class="ico" src="../static/img/share_btn.png" mode="widthFix"></image>
							</view>
								
							<view class="btn_item" @click="postMyAigcLiveDel(item.id,item.name,item.is_private)">
								<image class="ico" src="../static/img/del_btn.png" mode="widthFix"></image>
								
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
		<!-- 操作菜单 -->
		<u-popup :show="showPower" @close="closePower" @open="openPower" mode="bottom" bgColor="#2C2C2C" round="30rpx">
			<view class="power_sheet">
				<view class="item" v-for="(item,index) in listSheet" :key="index" @click="clickSheetPower(item.name,item.val)">
					{{item.name}}
				</view>
			</view>
		</u-popup>
		
		<!-- 教程 -->
		<u-popup :show="showTutorials"  mode="center" bgColor="#484848" round="10rpx" :safeAreaInsetBottom="false" @close="closeTutorials" @open="openTutorials">
			<view class="tutorials">
				<view class="text">
					快速创建智能体教程
				</view>
				<image class="img" src="../static/img/create_tutorials.png" mode="aspectFill"></image>
				
				<checkbox-group class="agree" @change="changeCheckbox">
					<label>
						<checkbox value="agree" color="#FFCC33" style="transform:scale(0.6)" />我已会使用，不再提示
					</label>
					
				</checkbox-group>
				<view class="btn-box">
					
					<view class="btn_left" @click="toTutorials" >
						详细教程
					</view>
					<view class="btn_right" @click="closeTutorials">
						立即确认
					</view>
				</view>
				
			</view>
		</u-popup>
		
		<!-- 二维码 -->
		<u-popup :show="showCode" mode="center" bgColor="transparent" overlayOpacity="0.7" @close="closeCode" @open="openCode">
			<view class="share_code">
				<view class="info">
					<image class="ph" :src="codeImg" mode="widthFix"></image>
				</view>
				<view class="btn" @click="downCodeImg">
					下载场景专属二维码
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isList: false,
				showPower: false,
				showTutorials: false,
				hideTutorials: 0,
				showCode: false,
				codeImg: '',
				listSheet: [
					{
						name: '公开',
						val: 0
					},
					{
						name: '会员',
						val: 2
					},
					{
						name: '密友',
						val: 1
					},
					{
						name: '个人',
						val: 4
					},
					{
						name: '取消',
						val: -1
					}
				],
				userInfo:{},
				userId:'',
				livesList: [],
				liveItem: {}
			}
		},
		onLoad() {
			this.userId = uni.getStorageSync('userId');
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.getMyAigcLivesList()
		},
		onShow() {
			this.userId = uni.getStorageSync('userId');
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.getMyAigcLivesList()
			this.updateUserdata()
			this.hideTutorials = uni.getStorageSync('hideTutorials');
			console.log('hideTutorials--', this.hideTutorials)
			if(this.hideTutorials == 0){
				this.showTutorials = true;
			}
		},
		methods: {
			changeCheckbox(e) {
				console.log('e----', e.detail.value.length)
				this.hideTutorials = e.detail.value.length
				uni.setStorageSync("hideTutorials", this.hideTutorials);
				
			},
			updateUserdata(){
				uni.$u.http.post('/api/update_userdata/' + this.userId + '?from=miniprogram', {
					first_name: this.userInfo.first_name
				}).then(res => {
					console.log('更新用户资料----', res.data)
					uni.setStorageSync("userInfo", JSON.stringify(res.data.data));
					//uni.setStorageSync("token", resa.data.data.token);
					//uni.setStorageSync("isLogin", true);
					//uni.setStorageSync("userId", resa.data.data.user_id);
					this.userInfo = res.data.data
					// uni.reLaunch({
					// 	url: "/myPages/create/create"
					// })
				}).catch(err => {
					console.log(err)
				})
			},
			// 我的互动场景
			getMyAigcLivesList(){
				uni.$u.http.get('/api/aigc_lives_list/'+this.userId +'?from=miniprogram&count=999').then(res => {
					console.log('我的互动场景-----',res.data.data)
					this.livesList = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			clickSheetPower(name, val){
				if(name == '取消'){
					this.showPower = false
				}
				else{
					this.showPower = false
					const that = this
					uni.showModal({
						title: '提示',
						content: '确定切换场景为'+name,
						success: function (respons) {
							if (respons.confirm) {
								that.postMyAigcLivesList(that.liveItem.id, that.liveItem.name, val)
							}
						}
					});
				}
			},
			// 更新互动场景 -- 更新列表权限is_private
			postMyAigcLivesList(id, name, isPrivate){
				uni.$u.http.post('/api/aigc_live_update/'+this.userId +'?from=miniprogram',{
					id: id,
					name: name,
					is_private: isPrivate
				}).then(res => {
					console.log('更新互动场景-----',res.data)
					uni.showToast({
						title: '更新成功',
						duration: 2000,
						icon:'none'
					});
					this.getMyAigcLivesList()
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: '更新失败',
						duration: 2000,
						icon:'none'
					});
				})
			},
			// 删除
			postMyAigcLiveDel(id, name, isPrivate){
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定删除吗？删除后无法恢复。',
					success: function (respons) {
						if (respons.confirm) {
							console.log('用户点击确定');
							uni.$u.http.post('/api/aigc_live_update/'+that.userId +'?from=miniprogram',{
								id: id,
								name: name,
								is_private: isPrivate,
								is_del: 1
							}).then(res => {
								console.log('删除互动场景-----',res.data)
								uni.showToast({
									title: '删除成功',
									duration: 2000,
									icon:'none'
								});
								that.getMyAigcLivesList()
							}).catch(err => {
								console.log(err)
							})
						} 
						else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			clickShowPower(item){
				this.showPower = true
				this.liveItem = item
			},
			openPower() {
				// console.log('open');
			},
			closePower() {
				this.showPower = false
				// console.log('close');
			},
			toTutorials() {
				uni.redirectTo({
					url: '/aboutUs/webView?title=使用教程&weburl='+encodeURIComponent('https://www.tuikeai.com/aigc/using_tutorials')
				})
			},
			openTutorials() {
				// console.log('open');
			},
			closeTutorials() {
				this.showTutorials = false
				// console.log('close');
			},
			getWechatAcode(liveId,isPrivate) {
				uni.showLoading({
					title: '生成中...'
				});
				//'pages/index/index?
				const page = encodeURIComponent('pages/index/index');
				const scene = encodeURIComponent('liveId='+ liveId);
				console.log(page)
				console.log(scene)
				uni.$u.http.get('/api/wechat_acode_unlimited/' + this.userId + '?from=miniprogram&bid=888&refresh=0&page='+page+'&scene='+scene).then(res => {
					console.log('获取推广二维码链接----', res.data)
					this.codeImg = res.data.data
					uni.hideLoading();
					this.showCode = true;
				}).catch(err => {
					console.log(err)
				})
			},
			// 保存图片
			downCodeImg() {
				const that = this
				uni.downloadFile({
					url: that.codeImg, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
							const tempFilePath = res.tempFilePath;
							// 2. 将图片保存到相册
							uni.saveImageToPhotosAlbum({
								filePath: tempFilePath,
								success: () => {
									uni.showToast({
										title: '图片已保存到相册',
										icon: 'none'
									});
								},
								fail: (err) => {
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
									console.error('保存失败:', err);
								}
							});
						}
						console.log('下载成功', res);
					}
				});
			},
			openCode() {
				// console.log('open');
			},
			closeCode() {
				this.showCode = false
				// console.log('close');
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	
.tutorials{
	width: 644rpx;
	box-sizing: border-box;
	background: #4B4B4B;
	border-radius: 30rpx;
	padding:30rpx 40rpx 40rpx 40rpx;
	.text{
		text-align: center;
		line-height: 70rpx;
		color: #FFF;
		font-size: 40rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
	}
	.img{
		width: 564rpx;
		height: 878rpx;
	}
	
	.agree {
		font-size: 18rpx;
		line-height: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		padding-bottom: 10rpx;
		label {
			display: flex;
			align-items: center;
		}
	
		.yellow {
			color: rgba(255, 164, 46, 1);
		}
	}
	
	.btn-box{
		width: 564rpx;
		height: 70rpx;
		align-items: center;
		justify-content: center;
		.btn_left{
			margin-top: 4rpx;
			height: 60rpx;
			border-radius: 35rpx;
			background: #F9BE01;
			line-height: 60rpx;
			text-align: center;
			color: #3D3D3D;
			width: 45%;
			float: left;
			font-size: 26rpx;
			font-weight: 600;
		}
		.btn_right{
			margin-top: 4rpx;
			width: 45%;
			float: right;
			height: 60rpx;
			border-radius: 35rpx;
			border: 1rpx solid #F9BE01;
			line-height: 60rpx;
			text-align: center;
			color: #F9BE01;
			font-size: 26rpx;
			font-weight: 600;
		}
	}
	
	
	
}
	
.power_sheet{
	padding:20rpx;
	width: 100%;
	box-sizing: border-box;
	.item{
		color:#fff;
		font-size: 26rpx;
		font-weight: 600;
		line-height: 40rpx;
		text-align: center;
		padding:20rpx;
	}
}
.scene_list{
	padding:10rpx 30rpx 20rpx;
	.list_item{
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		padding:20rpx 0;
		.ph{
			flex-shrink: 0;
			width: 160rpx;
			height: 260rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
		.item{
			width: 100%;
			.item_title{
				display: flex;
				align-items: center;
				margin-top: 6rpx;
				.name{
					font-size: 26rpx;
					font-weight: 600;
					line-height: 40rpx;
					color: #FFFFFF;
				}
				.tag{
					flex-shrink: 0;
					margin-left: 15rpx;
					height: 30rpx;
					border-radius: 4rpx;
					background: #4B4B4B;
					font-size: 20rpx;
					font-weight: normal;
					line-height: 30rpx;
					text-align: center;
					color: #FFFFFF;
					padding:0 15rpx;
				}
			}
			.text{
				font-size: 24rpx;
				font-weight: normal;
				line-height: 36rpx;
				color: #999999;
				margin-top: 10rpx;
			}
			.time{
				font-size: 20rpx;
				font-weight: normal;
				line-height: 30rpx;
				color: #999999;
				margin-top: 40rpx;
			}
			.btn{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;
				.btn_item{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 50rpx;
					border-radius: 30rpx;
					background: #4B4B4B;
					padding:0 15rpx 0 15rpx;
					margin-left: 15rpx;
					.ico{
						width: 36rpx;
						height: 36rpx;
					}
					text{
						display: block;
						font-size: 20rpx;
						font-weight: normal;
						color: #FFFFFF;
						line-height: 30rpx;
					}
				}
				.btn_fabu{
					width: 110rpx;
					height: 50rpx;
					border-radius: 25rpx;
					background: #FFB200;
					text-align: center;
					line-height: 50rpx;
					font-size: 20rpx;
					font-weight: normal;
					text-align: center;
					color: #1F1F1F;
					margin-right: auto;
				}
				.btn_power{
					width: 110rpx;
					height: 50rpx;
					border-radius: 25rpx;
					background: #FFB200;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 20rpx;
					color: #1F1F1F;
					line-height: 30rpx;
					box-sizing: border-box;
					padding:0 14rpx 0 18rpx;
					margin-right: auto;
				}
			}
		}
	}
}
.create_scene{
	margin: 40rpx;
	border-radius: 10rpx;
	background: #2C2C2C;
	.list_none{
		text-align: center;
		padding:70rpx 0;
		.img{
			display: block;
			width: 460rpx;
			margin: 0 auto;
		}
		.text{
			display: block;
			font-size: 24rpx;
			line-height: 36rpx;
			text-align: justify;
			color: #A6A6A6;
			text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2613);
			text-align: center;
			padding:40rpx 0 0;
		}
	}
	.title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:30rpx 30rpx 0;
		.name{
			font-size: 28rpx;
			line-height: 50rpx;
			color: #FFFFFF;
		}
		.btn{
			width: 160rpx;
			height: 50rpx;
			border-radius: 10rpx;
			background: #FFB200;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 36rpx;
			text-align: justify;
			color: #1F1F1F;
			line-height: 50rpx;
			text-align: center;
		}
	}
}
.share_code {
	.info {
		width: 590rpx;
		border-radius: 20rpx;
		background: #505050;
		padding: 45rpx;
		box-sizing: border-box;

		.ph {
			width: 100%;
			border-radius: 20rpx;
		}
	}

	.btn {
		width: 590rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 45rpx;
		background: #FFB200;
		font-size: 32rpx;
		color: #000000;
		text-align: center;
		margin-top: 30rpx;
	}
}
.create_nav{
	margin: 0 40rpx;
	height: 100rpx;
	border-radius: 10rpx;
	background: #2C2C2C;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	.item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		padding:0rpx 40rpx;
		.ico{
			flex-shrink: 0;
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
		.info{
			width: 100%;
			.name{
				font-size: 24rpx;
				font-weight: 500;
				line-height: 36rpx;
				text-align: justify;
				color: #FFFFFF;
			}
			.text{
				font-size: 18rpx;
				font-weight: normal;
				line-height: 26rpx;
				text-align: justify;
				color: #999999;
			}
		}
	}
}
.my_info{
	width: 100%;
	display: flex;
	align-items: center;
	padding:40rpx 40rpx 60rpx;
	box-sizing: border-box;
	.head{
		flex-shrink: 0;
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}
	.item{
		width: 100%;
		.name{
			font-size: 36rpx;
			font-weight: 600;
			line-height: 54rpx;
			text-align: justify;
			letter-spacing: 0px;
			color: #FFFFFF;
			text-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.5);
		}
		.text{
			margin-top: 14rpx;
			font-size: 28rpx;
			font-weight: normal;
			line-height: 42rpx;
			text-align: justify;
			letter-spacing: 0px;
			color: #A7A7A7;
			text-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.5);
		}
	}
}
</style>
